<template>
	<!--新闻-->
	<div class="hello">
		<div class="games_posi">
			<div class="games">
			<dl @click="news_app">
				<dt><img src="../../assets/ZHX_风车.png"></dt>
				<dd>动态</dd>
			</dl>
			<dl @click="games_app">
				<dt><img src="../../assets/奖牌.png"></dt>
				<dd>赛事</dd>
			</dl>
			<dl @click="friend_app">
				<dt><img src="../../assets/发现.png"></dt>
				<dd>发现</dd>
			</dl>
			<dl @click="my_app">
				<dt><img src="../../assets/我.png"></dt>
				<dd>我的</dd>
			</dl>
			
		</div>
		</div>
		
		<router-view></router-view>
	</div>
</template>
<script>	
		import { Tabbar, TabItem } from 'mint-ui';

	export default {
		data() {
			return {
				selected:true
			}
		},
		methods: {
			news_app:function(){
				this.$router.push({path:'/newss'})		
			},
			games_app:function(){
				this.$router.push({path:'/game'})		
			},
			friend_app:function(){
				this.$router.push({path:'/friend'})		
			},
			my_app:function(){
				this.$router.push({path:'/myapp'})		
			}
		}
	}
</script>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	/*.games_posi{
		position: relative;
	}*/
	.games{
		width: 100%;
		height:1.2rem;
		/*background-color:#FE8F24;*/
		font-size: 0.12rem;
		border: solid 1px #C0C0C0;
		position: fixed;
		bottom:0;
		left: 0;
	}
	.games dl{
		width: 25%;
		height: 1.2rem;
		float: left;
	}
	.games dl dt{
		width: 100%;
		height: 0.5rem;
	}
	.games dl dt img{
		width: 0.5rem;
		height: 0.5rem;
		margin-left: 0.7rem;
		margin-top: 0.2rem;
	}
	.games dl dd{
		width: 100%;
		height: 0.2rem;
		margin-top: 0.3rem;
		color: #333333;
		text-align: center;
	}
	.games dl dt:hover{
		
	}
</style>